<template>
  <div>
    <myDivider :name="'过户信息详情'"></myDivider>
    <el-page-header @back="$router.push('/Transfer/TransferList')">
    </el-page-header>

    <el-form :model="ruleForm" ref="ruleForm" style="width: 1000px;margin: 20px 0 0 20px;" label-width="100px">
      <el-row :gutter="40">
        <!-- 原业主信息  原业主信息  原业主信息  原业主信息-->
        <el-col :span="12">
          <div style="display: flex;margin: 20px 0;align-items: center;">
            <i class="el-icon-s-custom" style="font-size: 26px;margin-right:15px ;"></i>
            <span>原业主信息</span>
          </div>
          <el-form-item label="房间信息：">
            <div style="display: flex;">
              <el-input disabled :value="ruleForm.roomName"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="业主信息：">
            <div style="display: flex;">
              <el-input disabled placeholder="请选择业主" style="flex: 1;"
                :value="ruleForm.customerOldOwner.customerName"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="业主电话：">
            <el-input disabled style="flex: 1;" placeholder="请输入" v-model="ruleForm.customerOldOwner.phone"></el-input>
          </el-form-item>
          <el-form-item label="身份证号：">
            <el-input disabled style="flex: 1;" placeholder="请输入" maxlength="18"
              v-model="ruleForm.customerOldOwner.idNumber"></el-input>
          </el-form-item>
        </el-col>
        <!-- 新业主信息  新业主信息  新业主信息  新业主信息-->
        <el-col :span="12">
          <div style="display: flex;margin: 20px 0;align-items: center;">
            <i class="el-icon-s-custom" style="font-size: 26px;margin-right:15px ;"></i>
            <span>新业主信息</span>
          </div>
          <el-form-item label="房屋归属：">
            <el-select disabled style="width: 100%;" v-model="ruleForm.customerNewOwner.ownership"
              placeholder="请选择房屋归属">
              <el-option :label="item.name" v-for="item, i in housesData" :key="i" :value="item.value*1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="业主信息：">
            <div style="display: flex;">
              <el-input disabled placeholder="请选择业主" style="flex: 1;"
                :value="ruleForm.customerNewOwner.customerName"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="业主电话：">
            <el-input disabled style="flex: 1;" placeholder="请输入" v-model="ruleForm.customerNewOwner.phone"></el-input>
          </el-form-item>
          <el-form-item label="身份证号：">
            <el-input disabled style="flex: 1;" placeholder="请输入" maxlength="18"
              v-model="ruleForm.customerNewOwner.idNumber"></el-input>
          </el-form-item>
        </el-col>
      </el-row>


      <!-- 附件 -->
      <!-- 附件 -->
      <!-- 附件 -->
      <div style="display: flex;margin: 50px 0 20px 0;align-items: center;">
        <i class="el-icon-upload" style="font-size: 26px;margin-right:15px ;"></i>
        <span>附件</span>
      </div>
      <el-form-item label="图片：" v-if="imgs.length > 0">
        <div class="imglist">
          <el-image class="el" style="width: 100px; height: 100px" v-for="item, i in imgs" :key="i" :src="item"
            :preview-src-list="imgs">
          </el-image>
        </div>
      </el-form-item>
      <el-form-item label="附件：" v-if="MyannexPathArr.length > 0">
        <div class="annexBox">
          <div class="annexList">
            <div class="el" v-for="item, i in MyannexPathArr" :key="i">
              <span>{{ item.name }}</span>
              <span @click="dow(item)">下载附件</span>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="经办人：">
        <el-input disabled style="width: 200px;" v-model="ruleForm.createUserName" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="归档日期：">
        <el-input disabled style="width: 200px;" v-model="ruleForm.createTime" placeholder=""></el-input>
      </el-form-item>

    </el-form>



  </div>
</template>

<script>
import axios from 'axios';
export default {

  watch: {

  },
  data() {
    return {
      housesData: [],
      MyannexPathArr: [],
      imgs: [],
      // 表单相关
      ruleForm: {
        customerOldOwner: {},
        customerNewOwner: {}
      },
      UserDataList: [],

    }
  },
  async activated() {
    this.MyannexPathArr = []
    this.imgs = []
    let housesRes = await this.$api.customer.myGetOwnership()
    if (housesRes.code == 200) {
      this.housesData = housesRes.data
    } else {
      this.$message.error(housesRes.message)
    }
    let res = await this.$api.customer.myGetTransferOwnershipDetail(this.$route.query.id)
    console.log(res, '详情数据');
    this.ruleForm = res.data
    this.ruleForm.roomName = this.ruleForm.customerOldOwner.roomNamesArray.join('/')

    if (res.data.annexPathArray) {
      res.data.annexPathArray.forEach(el => {
        let index = el.lastIndexOf('/')
        this.MyannexPathArr.push({
          name: el.slice(index + 1),
          url: el,
        })
      })
    }
    if (res.data.imagePaths) {
      this.imgs = res.data.imagePaths
    }
    this.$nextTick(() => {
      this.$refs.ruleForm.clearValidate()
    })
  },
  methods: {
    dow(item) { //下载附件

      let soa_account = sessionStorage.getItem("soa_account");
      const token = sessionStorage.getItem("soa_token")
      axios({
        method: 'get',
        url: defaultUrl+`/business/transferOwnership/downloadAnnex?filePath=${item.url}`,
        headers: {
          // 在这里添加自己需要的请求头
          account: soa_account,
          token: token,
        },
        responseType: 'blob'
      }).then(res => {
        const url = window.URL.createObjectURL(new Blob([res.data]))
        const a = document.createElement('a')
        a.href = url
        a.setAttribute('download',item.name)
        document.body.appendChild(a)
        a.click();
        document.body.removeChild(a)
      })
    },
  },
}
</script>

<style lang="less" scoped>
.imglist {
  .el {
    border-radius: 5px;
    overflow: hidden;
    margin-right: 10px;
  }
}
.btn {
  position: fixed;
  bottom: 10px;
  right: 70px;
}

.annexBox {
  width: 500px;

  .annexList {
    width: 100%;
    box-sizing: border-box;
    border-right: 3px solid rgb(23, 197, 255);

    .el {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      span {
        &:nth-child(1) {
          width: 300px;
          display: block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        &:nth-child(2) {
          color: rgb(23, 197, 255);
          cursor: pointer;
          margin-right: 10px;
        }
      }
    }
  }

  .annexNone {
    color: #aaa;
  }
}
</style>